<template>
    <div class="user-container">
        <el-card class="box-card">
            <div slot="header">
                <!-- 导航 -->
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>角色管理</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- 导航 -->
            </div>
            <!-- 查询表单 -->
            <el-form ref="form" :inline="true" class="searcher-form" :model="form" label-width="100px" size="small">
                <el-form-item label="角色名称：" >
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
                </el-form-item>
            </el-form>
            <!-- 查询表单 -->
        </el-card>

        <el-card class="box-card">
            <div slot="header" class="data-header">
                <el-button type="success" @click="toAddRole">创建新角色</el-button>
                <span>筛选出{{totalCount}}条符合条件的数据</span>
            </div>
            <!-- 数据表格 -->
            <el-table
                v-loading="loading"
                class="data-form"
                :data="roleList"
                style="width: 100%">
                <el-table-column
                    prop="roleName"
                    label="姓名" align="center">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.roleName}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="roleNo"
                    label="代号" align="center">
                </el-table-column>
                <el-table-column
                    prop="roleDesc"
                    label="描述" align="center">
                </el-table-column>
                <el-table-column
                    prop="roleSort"
                    label="排序" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            icon="el-icon-edit" circle
                            @click="handleEdit(scope.$index, scope.row)"
                        ></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 数据表格 -->
            <!-- 分页 -->
            <el-pagination
                background
                layout="prev, pager, next, sizes, total"
                @current-change="onChangePage"
                @size-change="onChangePageSize"
                :page-sizes="[5, 10, 20, 50]"
                :total="totalCount">
            </el-pagination>
            <!-- 分页 -->
        </el-card>
    </div>
</template>

<script>
    import {getRoleList} from '../../api/role'

    import '../../filter'

    export default {
        name: "RoleIndex",
        data() {
            return {
                form: {
                    name: ''
                },
                roleList: [],   // 数据集合
                page: 1,        // 页码
                pageSize: 10,   // 每页显示多少数据
                totalCount: 0,  // 总数据个数
                loading: false  // 是否正在加载数据
            }
        },
        created() {
            this.loadRoleList()
        },
        methods: {
            //加载用户列表
            loadRoleList() {
                this.onSearch()
            },
            onSearch() {
                this.loading = true     // 加载数据中
                getRoleList({
                    'name': this.form.name,
                    'page': this.page,
                    'pageSize': this.pageSize
                }).then(res => {
                    const data = res.data.data
                    this.roleList = data.list
                    this.totalCount = data.total
                })
                this.loading = false    // 加载数据结束
            },
            onChangePage(page) {
                this.page = page
                this.loadRoleList()
            },
            onChangePageSize(pageSize) {
                this.pageSize = pageSize
                this.loadRoleList()
            },
            toAddRole() {
                this.$router.push("/addRole")
            },
            handleEdit(index,row) {
                // 编辑角色
                this.$router.push({path:'/editRole',query:{
                        'roleId': row.roleId
                }})
            }
        }
    }
</script>

<style scoped>

</style>
